<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j screening-goods-container">
    <template v-if="screeningConfig.data.length > 0">
      <div class="screening-goods-content">
        <div class="title">
          <span class="bg-l" />
          {{ getTitle }}
          <span class="bg-r" />
        </div>
        <div class="screening-goods-list">
          <template
            v-for="(item, index) in screeningConfig.data"
            :key="index"
          >
            <div
              class="goods-item"
              @click="handleClick(item)"
            >
              <div class="goods-img">
                <img-show :src="item.pic" />
              </div>
              <div class="goods-msg">
                <div class="goods-name">
                  {{ item.prodName }}
                </div>
                <div class="goods-price">
                  <div class="price">
                    ￥
                    <span class="big">{{ item.price }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-else>
      <empty-all-tips
        :text="$t('sorryNoRelatedProducts')"
        :back="$t('lookAtOther')"
        :ex-back="$t('shopInfo.mallHome')"
      />
    </template>
  </div>
</template>
<script setup>

const props = defineProps({
  screeningConfig: { // 筛选的商品
    type: Object,
    default: () => {
    }
  }
})

const router = useRouter()
const langStore = useLanguageStore()

const getTitle = computed(() => {
  let title = ''
  if (props.screeningConfig.type === 'goods') {
    title = '热卖商品'
  } else if (props.screeningConfig.type === 'category') {
    title = props.screeningConfig.category
  }
  return title
})

// 商品点击
const handleClick = (item) => {
  const newWindow = window.open()
  toProdDetail(item.prodId, newWindow)
}

/**
 * 跳转到商品
 */
const toProdDetail = (prodId, newWindow) => {
  const params = {
    prodId,
    lang: langStore.locale
  }
  const newPage = router.resolve({
    path: '/detail',
    query: params
  })
  if (newWindow) {
    newWindow.location.href = newPage.href
  } else {
    window.open(newPage.href, '_blank', 'noopener,noreferrer')
  }
}

</script>
<style lang="scss" scoped>
@use "index";
</style>
